<template>
	<view class="practiceMessage">
		<navbar></navbar>
		<textNavbar myprops="执业信息"></textNavbar>
		<view class="practiceMessage-content">
			<view class="content-upload">
				<tui-upload limit="2" :value="value" :serverUrl="serverUrl" @complete="result" @remove="remove"></tui-upload>
			</view>
			<view class="content-input">
				<van-field
					:value="numbers"
					placeholder="请输入执业证号"
					label="执业证号"
				/>
				<van-field
					:value="numbers"
					placeholder="请输入执业律所"
					label="执业律所"
				/>
				<van-field
				  :value="fieldValue"
				  is-link
				  readonly
				  label="地区"
				  placeholder="请选择所在地区"
				  @tap="onClick"
				/>
				<van-popup :show="show" round position="bottom">
					<van-cascader
						v-if="show"
						:value="cascaderValue"
						title="请选择所在地区"
						:options="options"
						@close="onClose"
						@finish="onFinish"
					/>
				</van-popup>
				<van-field
					:value="location"
					placeholder="请输入具体地址"
				/>
			</view>
			<view class="content-btn">
				<van-button type="info" round block custom-style="font-size: 36rpx; background: #036faf;">确认修改</van-button>
			</view>
		</view>
	</view>
</template>

<script>
	import tuiUpload from "@/components/thorui/tui-upload/tui-upload"
	export default {
		components:{
			tuiUpload,
		},
		data() {
			return {
				//上传接口地址
				serverUrl: "https://api.thorui.cn/",
				value:[], //初始化图片
				numbers: '', // 执业证号
				lawOffice: '', // 执业律所
				list: [],
				fieldValue: '',
				show: false,
				location: '', // 具体地址
				cascaderValue: [], // 当前级联选择器的值
				options: [
					{
						text: '浙江省',
						value: '330000',
						children: [{ text: '杭州市', value: '330100' }],
					},
					{
						text: '江苏省',
						value: '320000',
						children: [{ text: '南京市', value: '320100' }],
					}
				],
			};
		},
		methods: {
			onClick() {
			  this.show = true;
			},
			onClose() {
				this.show = false;
			},
			onFinish(event) {
				// 解构 detail 属性，Vue 事件对象直接传递参数，不需要 detail
				console.log(event);
				const { selectedOptions, value } = event.detail;
				// 使用 map 函数获取选中项的文本，并用 / 连接
				const fieldValue = selectedOptions.map(option => option.text || option.name).join('/');
				// 更新数据
				this.fieldValue = fieldValue;
				this.cascaderValue = value;
				this.show = false
			},
		}
	}
</script>

<style lang="scss" scoped>
	.content-upload {
		display: flex;
		align-items: center;
		justify-content: center;
	}
	.content-btn {
		width: 690rpx;
		height: 88rpx;
		margin: 40rpx auto;
	}
</style>
